Summary

• Touch targets & layout: MovieRow action buttons now use proper size="sm" height (36px); delete button is w-9 h-9; row reflows to two-row stack on mobile (flex-col sm:flex-row) so the info block is never squeezed
• Missing feature: StreamingRefreshButton added to the mobile "More" sheet (was desktop-only); watchlist empty-state copy updated to reference the bottom nav instead of "the sidebar"
• Modals & dialogs: MovieReviewModal review grid stacks to 1-col on mobile; footer stacks vertically with 44px-minimum edit button tap targets; RatingDialog form locked (pointer-events-none opacity-50) while submission is in-flight
• Navigation & filters: Bottom nav active state gains a visible amber dot indicator and improved contrast (bg-amber-700); FilterBar pills switch to horizontal scroll on mobile with scrollbar-hide to suppress native scrollbar
• Small fixes: inputMode="url" on Add Movie URL input; all page containers get mx-auto; streaming provider logos bumped 16→20px; Recommendations controls row wraps on 320px screens

Fixes all 13 issues (🔴×2 critical, 🟠×4 high, 🟡×4 medium, 🔵×3 low) from the mobile UI/UX review.

Test Plan

• 175/175 tests passing (npm run test:run)
• On a 375px viewport: MovieRow shows info row + action strip as two separate rows
• Action buttons and delete button are comfortably tappable (≥36px height)
• Mobile "More" sheet contains Refresh Streaming button
• Empty watchlist shows "Tap ➕ below to add your first film"
• Add Movie URL input shows URL keyboard on iOS/Android
• MovieReviewModal reviews stack vertically on phone, side-by-side on tablet
• Bottom nav active tab shows amber dot indicator below label
• FilterBar pills scroll horizontally on mobile without showing a scrollbar
• Recommendations controls wrap to second line on narrow screens
• RatingDialog form is visually disabled (dimmed, non-interactive) while submitting

🤖 Generated with Claude Code